<template>
    <div class="child-component">
        <childComponent />
    </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue';

const isRed = ref(false)

const childComponent = () => {
    const changeColor = () => {
        isRed.value = !isRed.value
    }

    return (
        <>
            <div className={`fontWeight600 ${isRed.value ? 'showRed' : ''}`}>hello world</div>
            <div class={['fontWeight600', isRed.value ? 'showRed' : '']}>hello vue,hello jsx</div>
            <br />
            <button onClick={changeColor}>change Color</button>
        </>
    )
}
</script>

<style scoped lang="less">
.child-component {
    :deep(.fontWeight600) {
        font-weight: 600;
    }

    :deep(.showRed) {
        color: red;
    }
}
</style>